<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合盘结果</title>
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <script src="{$oss}/active/newyear/js/rem.js"></script>
    <link rel="stylesheet" href="/static/valentine/2020/css/get_with_score.css?v=2">
    <style>
        .content-box {
            margin: 0 auto;
        }

        .content-box .top-box {
            width: 7.5rem;
            height: 8rem;
            background: url("{$oss}/mini/astro_synastry/title_bg.png") center top no-repeat;
            background-size: 100%;
        }

        .top-box .with-icon {
            width: 0.97rem;
            height: 0.65rem;
            position: absolute;
            left: 3.275rem;
            top: 2.33rem;
            /*background: url("{$oss}/mini/astro_synastry/with.png") center center no-repeat;*/
            background: url("/static/synastry/img/vs.png") center center no-repeat;
            background-size: cover;
        }

        .content-box .item .item-value:before {
            content: '';
            display: block;
            width: 0.23rem;
            height: 0.2rem;
            position: absolute;
            left: 0;
            top: -0.09rem;
            background: url("{$oss}/mini/astro_synastry/yinhao_left.png") center center no-repeat;
            background-size: 100%;
        }

        .content-box .item .item-value:after {
            content: '';
            display: block;
            width: 0.23rem;
            height: 0.2rem;
            position: absolute;
            right: 0;
            bottom: 0;
            background: url("{$oss}/mini/astro_synastry/yinhao_right.png") center center no-repeat;
            background-size: 100%;
        }

        .content-box .item .item-title1.gx:before {
            content: '';
            display: block;
            width: 0.37rem;
            height: 0.37rem;
            position: absolute;
            left: 0;
            top: 0.025rem;
            background: url("{$oss}/mini/astro_synastry/best.png") center center no-repeat;
            background-size: 100%;
        }

        .user-box {
            margin-top: 0.4rem;
            margin-bottom: 0.4rem;
        }

        .user-box .user-item {
            position: relative;
            box-sizing: border-box;
            line-height: 0.52rem;
            border-radius: 0.26rem;
            font-size: 0.28rem;
            font-weight: 400;
            display: inline-block;
            padding: 0 0.3rem 0 0.56rem;
            margin-right: 0.35rem;
        }

        .user-box .user-item:first-child {
            color: #6194FA;
        }

        .user-box .user-item:last-child {
            color: #F6819F;
        }

        .user-box .user-item:first-child:before {
            content: "";
            display: block;
            width: 0.1rem;
            height: 0.1rem;
            background-color: #6194FA;
            border-radius: 0.05rem;
            position: absolute;
            left: 0.3rem;
            top: 0.21rem;
        }

        .user-box .user-item:last-child:before {
            content: "";
            display: block;
            width: 0.1rem;
            height: 0.1rem;
            background-color: #F6819F;
            border-radius: 0.05rem;
            position: absolute;
            left: 0.3rem;
            top: 0.21rem;
        }

        .user-box .user-item.active:first-child {
            background-color: #D5E3FF;
            color: rgba(97, 148, 250, 1);
            font-weight: 500;
        }

        .user-box .user-item.active:last-child {
            background-color: #FFE7ED;
            color: rgba(246, 129, 159, 1);
            font-weight: 500;
        }

        .hr {
            height: 1px;
        }
    </style>
</head>
<body>
<div class="content-box">
    <div class="top-box">
        <div class="left-box avatar-box">
            <img onerror="onerror=null;src='{$oss}/avatar_default_2.png'"
                 src="{if strpos($result.avatar1,'http')=== false}{$oss}{/if}{$result.avatar1}" class="left-img"
                 alt="">
            <p class="name">{$result.nickname1}</p>
        </div>
        <div class="with-icon"></div>
        <div class="right-box avatar-box">
            <img onerror="onerror=null;src='{$oss}/avatar_default_2.png'"
                 src="{if strpos($result.avatar2,'http')=== false}{$oss}{/if}{$result.avatar2}" alt=""
                 class="right-img">
            <p class="name">{$result.nickname2}</p>
        </div>
        <div class="result-score">
            <div class="title1">发展潜力得分</div>
            <div class="with-score">{$total_score}</div>
            <div class="left1-box text-b">
                <p class="p1">{$result.harmoniousAndConflict[0]}%</p>
                <p class="p2">和谐</p>
            </div>
            <div class="progess-box">
                <div class="progess-left icon-af"></div>
                <div class="progess-right"></div>
            </div>
            <div class="right1-box text-b">
                <p class="p1">{$result.harmoniousAndConflict[1]}%</p>
                <p class="p2">冲突</p>
            </div>
        </div>
    </div>
    <div class="content-box">
        <div class="item">
            <div class="item-title">{$result.if_love_status==1?'今生有缘':'假如恋爱'}</div>
            <div class="item-value">{$result.if_love}</div>
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx">最合适的关系</div>
            {foreach name="$result.relation" item="v"}
            <div class="item-option">
                <div class="name">{$v.name_cn}</div>
                <div class="progess-box">
                    <div class="progess-index" style="width:{$v.per*100}%"></div>
                </div>
                <div class="val">{:intval($v.per*100)}%</div>
            </div>
            {/foreach}
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx">关系发展潜力</div>
            <div class="canvas-box">
                <div class="canvas-box-item">
                    <canvas id="capacity" width="300" height="300"></canvas>
                </div>
            </div>
            <div class="info-box"></div>
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx">整体关系评价</div>
            <div class="lz-dian">立足点</div>
            {foreach name="$result.foothold" key="k" item="v"}
            <div class="lz-md-text">{$k+1}. {$v}</div>
            {/foreach}
            <div class="md-dian mt40">矛盾点</div>
            {foreach name="$result.conflict" key="k" item="v"}
            <div class="lz-md-text">{$k+1}. {$v}</div>
            {/foreach}
        </div>
        <span class="hr mt20 mb10"></span>
        <div class="item">
            <div class="item-title1 gx">双方在关系中的收获</div>
            <div class="relation-box">
                <canvas id="relation"></canvas>
            </div>
            <div class="relation-text-box">
                <div class="relation-option-box">
                    <div class="option-item active">成长</div>
                    <div class="option-item">物质</div>
                    <div class="option-item">关爱</div>
                    <div class="option-item">激励</div>
                    <div class="option-item">安全</div>
                    <div class="option-item">幸运</div>
                </div>
                <div class="relation-option-text">
                    <div class="text-item active">成长：在相处中可能获得的经验和知识，但有时也意味着承受的压力和约束。</div>
                    <div class="text-item">物质：金钱或利益往来。这里仅是潜在的可能性。</div>
                    <div class="text-item">关爱：得到对方的关心和爱护，但也有时候，只代表感受到对方的情绪，与对方有较为亲密的情感互动。</div>
                    <div class="text-item">激励：在相处中获得的引导和鼓励，会让人目标清晰，有时也会让人充满前进的力量。</div>
                    <div class="text-item">安全：获得情绪上的抚慰或内心需求的满足，自己觉得比较有安全感。但有些人天生欠缺安全感，比较难以被满足。</div>
                    <div class="text-item">幸运：得到机遇、帮助或某方面的好处（比如赠礼），有时也仅仅是相处时较为放松和开心。</div>
                </div>
            </div>
            <div class="user-box">
                <div class="user-item active" data-index="1">{$result.nickname2}</div>
                <div class="user-item" data-index="2">自己</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        var drawCanvas = {
            ctx: null,
            data: null,
            dom: null,
            isInit: false,// 是否初始化
            space1: 20,// 第一个前面距离，留空
            space2: 42,// 每一个间隔
            scale: 1,// 放大倍数
            startYear: 12,// 开始年份
            Years: 89,// 总岁数
            colors: ['#FFC952', '#FFE5B2'],// 曲线渐变颜色组
            curvData1: [],// 曲线绘制数据
            curvData2: [],// 曲线绘制数据
            sectionData: [],// 曲线分段进行区间判断
            points: [],
            direction: 1,// 横向 0  ，纵向 1
            fontFamily: 'serif',// 字体 arial Verdana serif Verdana
            // 计算分值在区间内的位置
            calcPerc: function (obj, n, max, min) {
                var s, lo, re, l = max - min;
                if (obj.direction) {
                    s = 35;
                    lo = $(obj.dom).parents('.curv-box').width() - s - 10;
                    re = (n - min) / l * lo + s;
                } else {
                    s = 35;
                    lo = 155;
                    re = (max - n) / l * lo + s;
                }
                return re;
            },
            // 绘制间隔线条
            drawLine: function (obj, x1, y1, x2, y2, lineWidth, strokeStyle) {
                // 绘制线
                obj.ctx.beginPath();
                // obj.ctx.setLineDash([5]);
                obj.ctx.moveTo(x1, y1);
                obj.ctx.lineTo(x2, y2);
                obj.ctx.lineWidth = lineWidth || 1;
                obj.ctx.strokeStyle = strokeStyle || '#EAEAEA';
                obj.ctx.stroke();
                obj.ctx.closePath();
            },
            // 绘制曲线
            drawCruvLine: function (obj, curvData, strokeStyle) {
                obj.ctx.beginPath();
                obj.ctx.setLineDash([]);
                obj.ctx.strokeStyle = strokeStyle;
                obj.ctx.globalAlpha = 1;
                obj.ctx.lineWidth = 3;
                var b = curvData[0], e;
                for (var i = 0; i < curvData.length - 1; i++) {
                    // 三次贝塞尔曲线
                    e = curvData[i + 1];
                    if (i === 0) {
                        // 左侧线头
                        // obj.ctx.moveTo(b.x - obj.space1, b.y);
                        obj.ctx.moveTo(b.x, b.y);
                    } else {
                        obj.ctx.moveTo(b.x, b.y);
                    }
                    var c, c1, c2;
                    c = (curvData[i].x + curvData[i + 1].x) / 2;
                    c1 = {x: c, y: b.y};
                    c2 = {x: c, y: e.y};// 横向
                    // 右侧线头
                    // if (i === obj.curvData.length - 2) e.x += obj.space1;
                    obj.ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, e.x, e.y);
                    // 下一个起点 为当前结束点
                    b = e;
                }
                obj.ctx.stroke();
                obj.ctx.closePath();
            },
            // 绘制重点标记
            drawPoint: function (obj, pointData, fillStyle) {
                var x = pointData.x, y = pointData.y;
                obj.ctx.beginPath();
                obj.ctx.moveTo(x, y);
                obj.ctx.globalAlpha = 1;
                obj.ctx.arc(x, y, 6, 0, 2 * Math.PI, true);
                obj.ctx.closePath();
                // 最高点和最低点的
                obj.ctx.fillStyle = fillStyle;
                obj.ctx.fill();
                obj.ctx.beginPath();
                obj.ctx.moveTo(x, y);
                obj.ctx.globalAlpha = 1;
                obj.ctx.arc(x, y, 4, 0, 2 * Math.PI, true);
                obj.ctx.closePath();
                obj.ctx.fillStyle = '#fff';
                obj.ctx.fill();
            },
            // 绘制文字
            drawText: function (obj, str, x, y, font, fillStyle) {
                obj.ctx.beginPath();
                obj.ctx.font = font || '10px ' + obj.fontFamily;
                obj.ctx.fillStyle = fillStyle || '#6747F5';
                obj.ctx.fillText(str, x, y);
                obj.ctx.closePath();
            },
            // 将数据进行分区段处理，每10个分成一段，并计算出区段的最大值和最小值
            getSectionData: function (obj) {
                var arr = obj.data, total = Math.ceil(arr.length / 10);
                for (var i = 0; i < total; i++) {
                    var t = arr.splice(0, 10),
                        max = Math.max.apply(null, t),
                        min = Math.min.apply(null, t),
                        arrTmp = {
                            data: t,
                            max: max,
                            min: min,
                        };
                    obj.sectionData.push(arrTmp);
                }
            },
            initload: function (id, data, flag, index, sorts) {
                var obj = this;//, max, min
                obj.dom = document.getElementById(id);
                obj.canvasWidth = $(obj.dom).parent().width();
                obj.canvasHeight = obj.canvasWidth / 1.6;
                obj.ctx = document.getElementById(id).getContext("2d");
                obj.data = data;// 初始化曲线绘制数据
                obj.sorts = sorts; // 顺序

                obj.dom.setAttribute('width', obj.canvasWidth + 'px'); // 设置画布宽度
                obj.dom.setAttribute('height', obj.canvasHeight + 'px'); // 设置画布高度
                obj.ctx.scale(obj.scale, obj.scale);
                this.draws(flag, index)
                this.isInit = true;
            },
            draws: function (flag, index) {
                this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);// 清空画布
                this.ctx.lineJoin = 'round';// 线条圆滑
                this.ctx.lineCap = 'round';
                this.ctx.textAlign = 'left';

                var leftX = this.canvasWidth / 670 * 95;
                var rigthX = this.canvasWidth / 670 * 640;
                var textX = this.canvasWidth / 670 * 30;
                var StarPiointY = this.canvasHeight * 23 / 24,
                    baseY = this.canvasHeight * 5 / 6 / 100;
                for (var i = 0; i < 6; i++) {
                    var y = this.canvasHeight * (3 + 4 * i) / 24
                    this.drawLine(this, leftX, y, rigthX, y, 2, '#F2E8EB');
                    this.drawText(this, 100 - i * 20, textX, y + this.canvasWidth / 670 * 10, '30px serif', '#66434A');
                    var piointX = this.canvasWidth / 670 * (138 + i * 92);
                    if (!this.isInit) {
                        this.curvData1.push({
                            'x': piointX,
                            'y': StarPiointY - baseY * this.data['score1'][this.sorts[i]]
                        });
                        this.curvData2.push({
                            'x': piointX,
                            'y': StarPiointY - baseY * this.data['score2'][this.sorts[i]]
                        });
                    }
                }
                // 画自己的曲线
                this.drawCruvLine(this, this.curvData1, '#6194FA');
                // 画对方的曲线
                this.drawCruvLine(this, this.curvData2, '#F6819F');

                this.ctx.textAlign = 'center';
                if (flag == 1) {
                    this.drawPoint(this, this.curvData1[index], '#6194FA');
                    this.drawText(this, this.data['score1'][this.sorts[index]], this.curvData1[index]['x'], this.curvData1[index]['y'] - this.canvasWidth / 670 * 20, '30px serif', '#6194FA');
                } else {
                    this.drawPoint(this, this.curvData2[index], '#F6819F');
                    this.drawText(this, this.data['score2'][this.sorts[index]], this.curvData2[index]['x'], this.curvData2[index]['y'] - this.canvasWidth / 670 * 20, '30px serif', '#F6819F');
                }
            }
        };
        // flag=1 表示user-B  flag=2 表示user-B
        var flag = 1;
        setTimeout(function () {
            drawCanvas.initload('relation', {
                    'score1': JSON.parse('{:json_encode($result.score1)}'),
                    'score2': JSON.parse('{:json_encode($result.score2)}')
                },
                flag, 0, ['grow', 'substance', 'care', 'motivate', 'relieved', 'luck']
            );
        }, 500)

        // user-B与user-A 切换
        $('.user-box .user-item').click(function () {
            flag = $(this).data('index');
            var index = $('.relation-option-box .option-item.active').index();
            drawCanvas.draws(flag, index);
            $(this).addClass('active').siblings().removeClass('active');
        })
        $('.content-box .item .relation-text-box .relation-option-box .option-item').click(function () {
            var index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('.content-box .item .relation-text-box .relation-option-text .text-item').removeClass('active').eq(index).addClass('active');
            drawCanvas.draws(flag, index);
        })
    })
</script>
<script type="text/javascript">
    $(function () {
        var radarCanvas = {
            ctx: null,
            dom: null,
            data: null,
            colors: {
                // 文字颜色
                textColor: '#7F8698',
                // 圆圈颜色
                circleColor: '#E3E3E3',
                // 区域描边颜色
                borderColor: '#AFD3FF',
                // 区域填充颜色
                areaColor: '#AFD3FF',
            },
            fontSize: 14,// 文字字体大小
            wholeScale: 4,// 画布缩放比例
            firstScale: 0.7,// 最外圈半径占画布半径的比例
            // 设置配置
            setConfig: function (option) {
                this.dom = document.getElementById(option.id);
                this.ctx = this.dom.getContext("2d");
                this.data = option.data;
                this.colors = option.colors;
                this.fontSize = option.fontSize ? option.fontSize : 14;
                this.wholeScale = option.wholeScale ? option.wholeScale : 4;
                this.firstScale = option.firstScale ? option.firstScale : 0.7;

                return this;
            },
            /**
             * 获取点的坐标
             * @param cx 中心点横坐标
             * @param cy 中心点纵坐标
             * @param r 半径
             * @param angle 角度
             */
            getPoint: function (cx, cy, r, angle) {
                var x = -r * Math.cos(Math.PI / 180 * angle) + cx;
                var y = -r * Math.sin(Math.PI / 180 * angle) + cy;
                return {x: x, y: y};
            },
            // 画圆
            drawCircle: function (x, y, cx, cy, r, strokeColor, filleColor) {
                this.ctx.beginPath();
                if (x && y) {
                    this.ctx.moveTo(x, y);
                }
                this.ctx.arc(cx, cy, r, 0, 2 * Math.PI, true);
                if (strokeColor) {
                    this.ctx.strokeStyle = strokeColor;
                    this.ctx.stroke();
                }
                if (filleColor) {
                    this.ctx.fillStyle = filleColor;
                    this.ctx.globalAlpha = 1;
                    this.ctx.fill();
                }
                this.ctx.closePath();
                return this;
            },
            // 绘制文字
            drawText: function (power, color, x, y, font_size) {
                this.ctx.beginPath();
                this.ctx.font = (font_size / 414 * canvas) + 'px Arial';
                this.ctx.fillStyle = color;
                this.ctx.globalAlpha = 1;
                this.ctx.fillText(power, x, y);
                this.ctx.closePath();
            },
            // 绘制线条
            drawLine: function (x1, y1, x2, y2, strokeColor, filleColor) {
                this.ctx.beginPath();
                if (x1 && y1) {
                    this.ctx.moveTo(x1, y1);
                }
                this.ctx.lineTo(x2, y2);
                if (strokeColor) {
                    this.ctx.strokeStyle = strokeColor;
                    this.ctx.stroke();
                }
                if (filleColor) {
                    this.ctx.fillStyle = filleColor;
                    this.ctx.globalAlpha = 1;
                    this.ctx.fill();
                }
                this.ctx.closePath();
            },
            // 绘制分数区域
            drawArea: function () {

            },
            // 开始绘制
            draw: function (option) {
                var thisObj = this.setConfig(option);
                var canvasWidth = $(thisObj.dom).parent().width();
                var cx = canvasWidth / 2,// 中心点
                    r1 = cx * thisObj.firstScale,
                    r2 = r1 * 0.7,
                    r3 = r1 + cx * 0.05,
                    itemNum = thisObj.data.length,
                    changeAngle = 360 / itemNum,
                    startAngle = 0,
                    fontSize = thisObj.fontSize * thisObj.wholeScale / 2,
                    max = 100,
                    min = 0,
                    total = max - min;
                // 设置缩放 处理移动端虚化的问题
                thisObj.ctx.scale(thisObj.wholeScale, thisObj.wholeScale);
                // 设置canvas画布宽高 为4倍父级宽度
                thisObj.dom.setAttribute('width', canvasWidth);
                thisObj.dom.setAttribute('height', canvasWidth);
                // 设置画笔全局属性
                thisObj.ctx.lineWidth = 2;
                thisObj.ctx.font = fontSize + 'px Arial';

                // 最外圈
                thisObj.drawCircle(cx + r1, cx, cx, cx, r1, thisObj.colors.circleColor);
                // 第二圈 虚线圈
                // thisObj.drawCircle(cx + r2, cx, cx, cx, r2, thisObj.colors.circleColor);
                // 第二圈 虚线圈
                thisObj.ctx.beginPath();
                thisObj.ctx.moveTo(cx + r2, cx);
                thisObj.ctx.arc(cx, cx, r2, 0, 2 * Math.PI, true);
                thisObj.ctx.strokeStyle = thisObj.colors.circleColor;
                thisObj.ctx.setLineDash([thisObj.wholeScale * thisObj.wholeScale, thisObj.wholeScale * thisObj.wholeScale]);
                thisObj.ctx.stroke();
                thisObj.ctx.closePath();
                // 绘制外圈文字
                for (var i = 0; i < itemNum; i++) {
                    var xy = thisObj.getPoint(cx, cx, r3, startAngle), halfFont = fontSize / 2;
                    // 最左边的右侧对其对齐
                    if (startAngle === 0) {
                        xy.y += halfFont;
                        thisObj.ctx.textAlign = 'right';
                    } else if (startAngle > 0 && startAngle < 90) {
                        xy.x -= halfFont;
                        xy.y -= halfFont;
                        thisObj.ctx.textAlign = 'center';
                    } else if (startAngle === 90) {
                        xy.y -= halfFont;
                        thisObj.ctx.textAlign = 'center';
                    } else if (startAngle > 90 && startAngle < 180) {
                        xy.x += halfFont;
                        xy.y -= halfFont;
                        thisObj.ctx.textAlign = 'center';
                    } else if (startAngle === 180) {
                        xy.y += halfFont;
                        thisObj.ctx.textAlign = 'left';
                    } else if (startAngle > 180 && startAngle < 270) {
                        xy.x += fontSize;
                        xy.y += fontSize;
                        thisObj.ctx.textAlign = 'center';
                    } else if (startAngle === 270) {
                        xy.y += fontSize;
                        thisObj.ctx.textAlign = 'center';
                    } else if (startAngle > 270 && startAngle < 360) {
                        xy.x -= halfFont;
                        xy.y += fontSize;
                        thisObj.ctx.textAlign = 'center';
                    }
                    // 绘制文字在外圆外部
                    thisObj.ctx.beginPath();
                    thisObj.ctx.fillStyle = thisObj.colors.textColor;
                    thisObj.ctx.globalAlpha = 1;
                    thisObj.ctx.fillText(thisObj.data[i].text, xy.x, xy.y);
                    thisObj.ctx.closePath();

                    // 绘制分割线
                    if (i < itemNum / 2) {
                        var xy1 = thisObj.getPoint(cx, cx, r1, startAngle),
                            crossAngle = startAngle > 180 ? (startAngle - 180) : (startAngle + 180),
                            xy2 = thisObj.getPoint(cx, cx, r1, crossAngle);
                        thisObj.ctx.beginPath();
                        thisObj.ctx.moveTo(xy1.x, xy1.y);
                        thisObj.ctx.lineTo(xy2.x, xy2.y);
                        thisObj.ctx.setLineDash([]);
                        thisObj.ctx.strokeStyle = thisObj.colors.circleColor;
                        thisObj.ctx.globalAlpha = 1;
                        thisObj.ctx.stroke();
                        thisObj.ctx.closePath();
                    }
                    startAngle += changeAngle;
                }
                // 绘制分数区域
                startAngle = 0;
                var areaLineWidth = thisObj.wholeScale,// 1 * thisObj.wholeScale = thisObj.wholeScale
                    score0 = thisObj.data[0].sort,
                    r4 = (score0 > max ? max : (score0 < 2 ? 2 : score0)) / total * r1 - areaLineWidth,
                    scoreXyStart = thisObj.getPoint(cx, cx, r4, startAngle);

                thisObj.ctx.beginPath();
                // 画笔移动到起点
                thisObj.ctx.moveTo(scoreXyStart.x, scoreXyStart.y);
                for (var j = 1; j < itemNum; j++) {
                    startAngle += changeAngle;
                    var newScore = thisObj.data[j].sort;
                    newScore = newScore > max ? max : (newScore < 2 ? 2 : newScore);
                    r4 = (newScore) / total * r1 - areaLineWidth;
                    var scoreXy = thisObj.getPoint(cx, cx, r4, startAngle);
                    if (j === itemNum - 1) {
                        thisObj.ctx.lineTo(scoreXy.x, scoreXy.y);
                        thisObj.ctx.lineTo(scoreXyStart.x, scoreXyStart.y);
                    } else {
                        thisObj.ctx.lineTo(scoreXy.x, scoreXy.y);
                    }
                }
                thisObj.ctx.setLineDash([]);
                thisObj.ctx.lineWidth = areaLineWidth;
                thisObj.ctx.strokeStyle = thisObj.colors.borderColor;
                thisObj.ctx.stroke();
                thisObj.ctx.fillStyle = thisObj.colors.areaColor;
                thisObj.ctx.globalAlpha = 0.7;
                thisObj.ctx.fill();
                thisObj.ctx.closePath();
            }
        };

        var capacityData = JSON.parse('{:json_encode($result.score)}');
        var capacityTxt = {
            'attract': '吸引',
            'chat': '沟通',
            'passion': '激情',
            'benefit': '亲密',
            'happy': '愉悦',
            'probTobeLover': '缘分',
        }

        var resData = [];
        var strIt = '';
        $.each(capacityData, function (k, v) {
            resData.push({
                'text': capacityTxt[k],
                'sort': v.num
            });

            var scoreState = v.num > 75 ? ' highlight' : '';

            strIt += '<div class="info-item">\n' +
                '    <div class="score' + scoreState + '">' + v.num + '</div>\n' +
                '    <div class="name">' + capacityTxt[k] + '</div>\n' +
                '    <div class="desc">' + v.text + '</div>\n' +
                '</div>'
        })

        $('.content-box .item .info-box').html(strIt);

        var option = {
            id: 'capacity',
            data: resData,
            colors: {
                textColor: '#494949',// 文字颜色
                circleColor: '#f3ebed',// 圆圈颜色
                borderColor: '#FFBDCD',// 区域描边颜色
                areaColor: '#FFF2F2',// 区域填充颜色//#fff6f5
            }
        }

        setTimeout(function () {
            radarCanvas.draw(option);
        }, 500)
    })
</script>
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279238006&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
{include file="../apps/web/view/public/sensors.html" /}
</html>
